<template>
  <div class="users">
    <div class="box">
      <div class="addBox">
        <div class="seek">
          <div class="left">
            <el-form :inline="true" :model="input" :rules="rules" ref="formRef">
              <el-form-item prop="input1">
                <el-input size="default" v-model="input.input1" placeholder="请输入内容">
                  <template #append>
                    <el-button :icon="Search" @click="seek" />
                  </template>
                </el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="add">
            <el-button type="primary" size="default" @click="add()">添加用户</el-button>
          </div>
        </div>
        <div class="tableBox">
          <Table></Table>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Table from './table/index.vue'
import { Search } from '@element-plus/icons-vue'
import { useCounterStoreB } from '@/stores/temporary'
import { getHomeSeek } from '@/api/homeSeek'
interface resFace {
  data: {
    data: {
      email: string
      id: number
    }
  }
}
interface inputFace {
  input1: number
}
const rules = {
  input1: [
    { required: true, message: '请输入内容', trigger: 'blur' },
    { pattern: /^\d+(\.\d+)?$/, min: 1, max: 4, message: '只支持1~3位数字', trigger: 'blur' },
  ],
}
const StoreB = useCounterStoreB()
const input = ref<inputFace>({ input1: 0 })
const addState = ref(false)
const formRef = ref()

const add = () => {
  addState.value = !addState.value
  StoreB.stateFun(addState.value)
  StoreB.titleStateFun('添加用户')
}
const seek = async () => {
  try {
    await formRef.value.validate()
    const res = (await getHomeSeek(input.value.input1)) as resFace
    StoreB.seekObjectFun(res.data.data.id)
  } catch (error) {
    console.log(error)
  }
}

watch(
  () => StoreB.addState,
  (newValue) => {
    addState.value = newValue
  },
)
</script>

<style scoped lang="scss">
.addBox {
  .seek {
    display: flex;
    .left {
      display: flex;
      .buttonSeek {
        padding: 5px 15px;
        background: #f5f7fa;
        border: 1px solid #dcdfe9;
        border-left: none;
        border-radius: 3px;
      }
      .el-from {
        z-index: -1;
        .el-from-item {
          z-index: -1;
          .el-input {
            z-index: -1;
          }
        }
      }
    }
    .add {
      margin-left: 20px;
    }
  }
}
</style>
